<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <script src="../../libs/jquery-1.11.3.js"></script>
    <style type="text/css">
        div {
            width: 60px;
            height: 60px;
            margin: 5px;
            float: left;
            font-size: 0.8em;
            background: rgba(70, 237, 214, 0.5)
        }

        .first {
            background-color: rgba(51, 134, 250, 0.69);
            font-size: 12px;
        }

        .second {
            background-color: #ccc;
            color: red;
            font-size: 1em;
        }

        .third {
            background-color: yellow;
            /*font-size:20px;*/
        }

        .sixth {
            font-size: 12px;
        }

        p {
            width: 150px;
            height: 60px;
            margin: 5px;
            float: left;
            background: rgba(117, 255, 176, 0.4);
        }

        #third {
            width: 300px;
            height: 300px;
            margin: 5px;
            float: left;
            background: rgba(117, 255, 176, 0.4);
        }
    </style>
</head>
<body>

<h3>获取css属性</h3>
<div class="first">获取颜色</div>
<p></p>
<div class="second">获取文字尺寸</div>
<p></p>
<div class="third">获取宽高尺寸</div>
<p id="third"></p>

<script type="text/javascript">
    //background-color:blue; => rgb(0, 0, 255)
    //颜色都会转化成统一的rgb标示
    $('p:eq(0)').text($('.first').css('background-color'))

</script>

<script type="text/javascript">
    //字体大小都会转化成统px大小 em=>px
    $('p:eq(1)').text($('.second').css('font-size'))
</script>

<script type="text/javascript">
    //获取尺寸，传入CSS属性组成的一个数组
    //{width: "60px", height: "60px"}
    var value = $('.third').css(['backgroundColor', 'width', 'height', 'margin', 'background', 'float', 'fontSize']);
    //因为获取的是一个对象，取到对应的值
    $('p:eq(2)').html('background-color:' + value.backgroundColor + '<br/><br/>widht:' + value.width +
            ' <br/><br/>height:' + value.height + '<br/><br/> margin:' + value.margin + ' <br/><br/>background:' + value.background +
            ' <br/><br/>float:' + value.float + ' <br/><br/>font-size:' + value.fontSize)
    //    var value = $('.third').css(['width', 'height', 'fontSize']);
    //    $('p:eq(2)').text('widht:' + value.width + ' height:' + value.height + "font-size:" + value.fontSize);

</script>

</br></br></br>
<h3>设置css属性</h3>
<div class="fourth">设置颜色设置文字尺寸</div>
<div class="fifth">设置颜色设置文字尺寸</div>
<div class="sixth">通过回调设置新的值</div>
<div class="seventh">同时设置多少个样式</div>

<script type="text/javascript">
    //多种写法设置颜色
    $('.fourth').css('background-color', "red");
    $('.fifth').css('backgroundColor', 'yellow');
</script>

<script type="text/javascript">
    //多种写法设置字体大小
    $('.fourth').css('fontSize', '1em');
    $('.fifth').css('font-size', '16px');
</script>


<script type="text/javascript">
    //获取到指定元素的宽度，在回调返回宽度值
    //通过处理这个value，重新设置新的宽度
    $('.sixth').css('width', function (index,value) {
        value = value.split('px');
        return (Number(value[0]) + 60) + value[1];
    })
</script>

<script type="text/javascript">
    //合并设置,通过对象传设置多个样式
    $('.seventh').css({
        'font-size': "15px",
        "background-color": "#40E0D0",
        "border": "1px solid red"
    })
</script>


</body>

</html>